<script setup>
// import * as StudentApi from '@/api/cmis/student'
import { getAccessToken, getTenantId } from '@/utils/auth'
import * as SchoolApi from '@/api/cmis/school'
const message = useMessage() // 消息弹窗
const dialogTitle = '批量上传学生照片'
const dialogVisible = ref(false)
const filesType = ref('application/zip,application/7z,application/x-zip-compressed,.zip,.rar,.7z') //文件类型
const uploadHeader = ref()
const schoolList = ref([]) //学校列表
const onLoadData = ref({
  update: false, //是否是覆盖
  schoolId: undefined
})
const url =
  import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL + '/cmis/student/import-photo' // 指定上传路径
/** 打开弹窗 */
const open = async () => {
  //重置 表单
  onLoadData.value = {
    update: false, //是否是覆盖
    schoolId: undefined
  }
  dialogVisible.value = true
  removeFile()
  getSchoolLists()
  // 修改时，设置数据
  try {
  } finally {
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
const emit = defineEmits(['success', 'onloadResult'])
//上传文件校验
function beforeUpload(file) {
  const isCompressed = /\.(zip|rar)$/i.test(file.name)
  if (!isCompressed) {
    message.error('只允许上传压缩包文件！')
  }
  return isCompressed
}

function upload_exceed() {
  message.error('只允许上传1个压缩包文件！')
}

const uploadRef = ref()
const submitFileForm = async () => {
  // await StudentApi.importStudentImages(newFile.value)
  // dialogVisible.value = false
  // 提交请求
  uploadHeader.value = {
    Authorization: 'Bearer ' + getAccessToken(),
    'tenant-id': getTenantId()
  }
  uploadRef.value?.submit()
}

const submitFormSuccess = (res) => {
  dialogVisible.value = false
  emit('onloadResult', res.data)
  emit('success')
}

//删除文件
const removeFile = () => {
  uploadRef.value?.clearFiles()
}

//上传触发
const onDrop = (event) => {
  const isCompressed = /\.(zip|rar)$/i.test(event.dataTransfer.files[0].name)
  if (!isCompressed) {
    message.error('只允许上传压缩包文件！')
  }
}

//学校选择
// const schoolChange = (val) => {
//   onLoadData.value.schoolId = val
// }
// 获取学校列表
const getSchoolLists = async () => {
  const res = await SchoolApi.getSchoolList({})
  schoolList.value = res
}
</script>

<template>
  <!--    :http-request="Execute_File" -->
  <Dialog :title="dialogTitle" v-model="dialogVisible">
    <div class="form">
      <div>
        是否覆盖:
        <el-switch v-model="onLoadData.update" :active-value="true" :inactive-value="false" />
      </div>
      <div>
        选择学校：
        <el-select v-model="onLoadData.schoolId" clearable placeholder="请选择学校" filterable>
          <el-option
            v-for="item in schoolList"
            :key="item.id"
            :label="item.schoolName"
            :value="item.id"
          />
        </el-select>
      </div>
    </div>

    <div @drop.capture="onDrop">
      <el-upload
        class="upload-demo"
        drag
        :before-upload="beforeUpload"
        :action="url"
        :data="onLoadData"
        multiple
        :auto-upload="false"
        :accept="filesType"
        :on-remove="removeFile"
        :on-exceed="upload_exceed"
        ref="uploadRef"
        :headers="uploadHeader"
        :limit="1"
        :on-success="submitFormSuccess"
        show-file-list
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text"><em>拖拽上传</em> 或者 <em>点击上传</em>压缩文件 </div>
        <template #tip>
          <!-- <div class="el-upload__tip"> 压缩包文件大小不能超过2M </div> -->
          <!-- <div class="el-upload__tip"> 学生照片命名方式：学生照片名称对应学生学号 </div> -->
          <el-alert
            title="文件名为学籍号，支持jpg、jpeg、png , 上传文件类型为压缩文件类型"
            type="warning"
            :closable="false"
          />
        </template>
      </el-upload>
    </div>
    <template #footer>
      <el-button type="primary" @click="submitFileForm">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<style>
.serial {
  margin: 0 15px;
  color: red;
}

.form {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 25px;
}
</style>
